{namespace Index.soy}

/**
 * This is a Closure Template.
 *
 * To regenerate just English, run:
 *   make index-en
 *
 * To regenerate all languages, run:
 *   make languages
 */

/**
 * Translated messages for use in JavaScript.
 */
{template .messages}
  <div style="display: none">
    <span id="title">{msg meaning="Games.name" desc="IBID"}Blockly Games{/msg}</span>
    <span id="Index_clear">{msg meaning="Index.clear" desc="Confirmation prompt for deleting all the user's data."}Delete all your solutions?{/msg}</span>
  </div>
{/template}

/**
 * Web page structure.
 */
{template .start}
  {call .messages /}
  <div id="header">
    <img id="banner" src="index/title-beta.png" height="51" width="244" alt="Blockly Games">
    <div id="subtitle">
      {msg meaning="Index.subTitle" desc="Brief description of Blockly Games."}Games for tomorrow's programmers.{/msg}
      {sp}&nbsp;
      {if $ij.html}
        <a href="about.html?lang={$ij.lang}">
      {else}
        <a href="about?lang={$ij.lang}">
      {/if}
        {msg meaning="Index.moreInfo" desc="Link to a description of Blockly Games, intended for parents and teachers."}Info for educators...{/msg}
      </a>
    </div>
  </div>
  <svg height="100%" width="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(-150,-60)">
      <svg height="100%" width="100%" version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 100 100" preserveAspectRatio="none"
          x="150" y="60">
        <path id="path" d="M 10,15 C 15,60 35,100 50,70 S 80,20 90,85"
          {if $ij.rtl}
            transform="translate(100) scale(-1, 1)"
          {/if}
        />
      </svg>
      {call .appLink}
        {param app: 'puzzle' /}
        {param x: 10 /}
        {param y: 15 /}
        {param contentText}
          {msg meaning="Games.puzzle" desc="IBID"}Puzzle{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'maze' /}
        {param x: 16 /}
        {param y: 45 /}
        {param contentText}
          {msg meaning="Games.maze" desc="IBID"}Maze{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'bird' /}
        {param x: 26 /}
        {param y: 69 /}
        {param contentText}
          {msg meaning="Games.bird" desc="IBID"}Bird{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'turtle' /}
        {param x: 41 /}
        {param y: 80 /}
        {param contentText}
          {msg meaning="Games.turtle" desc="IBID"}Turtle{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'movie' /}
        {param x: 55 /}
        {param y: 61 /}
        {param contentText}
          {msg meaning="Games.movie" desc="IBID"}Movie{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'music' /}
        {param x: 69 /}
        {param y: 43 /}
        {param contentText}
          {msg meaning="Games.music" desc="IBID"}Music{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'pond-tutor' /}
        {param x: 83 /}
        {param y: 55 /}
        {param contentText}
          {msg meaning="Games.pondTutor" desc="IBID"}Pond Tutor{/msg}
        {/param}
      {/call}
      {call .appLink}
        {param app: 'pond-duck' /}
        {param x: 90 /}
        {param y: 85 /}
        {param contentText}
          {msg meaning="Games.pond" desc="IBID"}Pond{/msg}
        {/param}
      {/call}

    </g>
  </svg>
  <select id="languageMenu"></select>
  <p id="clearDataPara" style="visibility: hidden">
    {msg meaning="Index.startOver" desc="Label next to button for deleting all the user's data."}Want to start over?{/msg}
    <button class="secondary" id="clearData">
      {{msg meaning="Index.clearData" desc="Text on button for deleting all the user's data.\n{lb}{lb}Identical|Clear data{rb}{rb}"}}Clear data{{/msg}}</span>
    </button>
  </p>
{/template}

/**
 * Create a link to an app.
 * @param app Name of application.
 * @param x Horizontal position of link as percentage.
 * @param y Vertical position of link as percentage.
 * @param contentText Text content to place in link (safely escaped).
 */
{template .appLink private="true"}
  <svg height="150" width="300" version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      {if $ij.rtl}
        x="{100 - $x}%"
      {else}
        x="{$x}%"
      {/if}
      y="{$y}%">
    <path d="M 111.11,98.89 A 55 55 0 1 1 188.89,98.89" class="gaugeBack" id="back-{$app}" />
    <g class="icon" id="icon-{$app}">
      <circle cx="150" cy="60" r="50" class="iconBack" />
      <image xlink:href="index/{$app}.png" height="100" width="100" x="100" y="10" />
    {if $ij.html}
      <a id="link-{$app}" xlink:href="{$app}.html?lang={$ij.lang}">
    {else}
      <a xlink:href="{$app}?lang={$ij.lang}">
    {/if}
        <circle cx="150" cy="60" r="50" class="iconBorder" />
        <path class="gaugeFront" id="gauge-{$app}" />
        <text x="150" y="135">{$contentText}</text>
      </a>
    </g>
  </svg>
{/template}
